Highmaps হলো Highcharts এর একটি বিশেষ সংস্করণ যা ম্যাপভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন করতে ব্যবহৃত হয়। Highmaps লাইব্রেরির সাহায্যে আপনি বিভিন্ন ধরনের ম্যাপ (বিশ্বমানচিত্র, দেশভিত্তিক মানচিত্র, বা কাস্টম অঞ্চলের ম্যাপ) তৈরি করতে পারেন এবং সেই অনুযায়ী ডেটা প্রদর্শন করতে পারেন।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highmaps ব্যবহার করে ম্যাপভিত্তিক চার্ট তৈরি করা যায়।

Highmaps ইনস্টলেশন

প্রথমে, Highmaps এবং Highcharts লাইব্রেরি ইনস্টল করতে হবে।

1. Highcharts ইনস্টল করুন:

npm install highcharts --save

2. Highmaps ইনস্টল করুন:

Highmaps লাইব্রেরি Highcharts এর একটি প্লাগইন হিসেবে কাজ করে, তাই আপনাকে highcharts এবং highmaps একসাথে ইনস্টল করতে হবে।

npm install highcharts highcharts-more --save

Highmaps সেটআপ এবং কনফিগারেশন

Highmaps এর জন্য Angular কম্পোনেন্ট তৈরি করার আগে, আপনাকে Highcharts এবং Highmaps মডিউল ইমপোর্ট করতে হবে এবং কনফিগারেশন তৈরি করতে হবে।

1. app.module.ts ফাইলে Highmaps মডিউল ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Highcharts এবং Highmaps র‍্যাপার ইমপোর্ট করা
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule  // HighchartsChartModule যোগ করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. app.component.ts ফাইলে Highmaps কনফিগারেশন তৈরি করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import mapData from '@highcharts/map-collection/custom/world.geo.json'; // বিশ্ব মানচিত্রের ডেটা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Highmaps কনফিগারেশন সেটআপ করা
    this.chartOptions = {
      chart: {
        map: mapData // ম্যাপ ডেটা সংযুক্ত করা
      },
      title: {
        text: 'বিশ্বমানচিত্র'
      },
      mapNavigation: {
        enabled: true, // ম্যাপ জুম এবং প্যান ফিচার
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      colorAxis: {
        min: 0,
        max: 100,
        stops: [
          [0, '#ffcccc'],
          [0.5, '#ffff99'],
          [1, '#99ff99']
        ]
      },
      series: [{
        name: 'Population Density',
        data: [
          ['US', 80],
          ['GB', 50],
          ['IN', 150],
          ['CN', 100],
          ['AU', 20]
        ],  // দেশভিত্তিক ডেটা
        joinBy: 'iso-a2', // দেশ কোডের মাধ্যমে ডেটা যোগ করা
        tooltip: {
          pointFormat: '{point.name}: {point.value}'
        }
      }]
    };
  }
}

3. app.component.html ফাইলে Highmaps চার্ট যুক্ত করুন:

<div style="height: 600px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

1. mapData: Highmaps এর জন্য মানচিত্রের ডেটা প্রয়োজন হয়। এখানে আমরা world.geo.json ফাইল ব্যবহার করেছি, যা পৃথিবীর মানচিত্রের জিওJSON ডেটা প্রদান করে। আপনি অন্যান্য দেশভিত্তিক বা কাস্টম মানচিত্রও ব্যবহার করতে পারেন।
2. mapNavigation: enabled: true দিয়ে ম্যাপের zoom এবং pan ফিচার সক্রিয় করা হয়েছে, যাতে ব্যবহারকারী ম্যাপটিকে জুম ইন এবং আউট করতে পারে এবং প্যান করতে পারে।
3. colorAxis: ম্যাপের প্রতিটি দেশের জন্য রঙ নির্ধারণ করা হয়েছে, যেখানে min এবং max মানের ভিত্তিতে রঙ পরিবর্তন হবে। এই রঙের মান Population Density এর উপর ভিত্তি করে নির্ধারণ করা হয়েছে।
4. series: এখানে আমরা Population Density এর জন্য ডেটা প্রদান করেছি, যেখানে দেশগুলোর জন্য মান (value) নির্ধারণ করা হয়েছে। joinBy: 'iso-a2' ব্যবহার করা হয়েছে, যা Highmaps কে নিশ্চিত করে যে ডেটা দেশ কোডের (ISO 3166-1 alpha-2) মাধ্যমে যুক্ত হবে।

সারাংশ

Highmaps ব্যবহার করে আপনি ম্যাপভিত্তিক চার্ট খুব সহজেই তৈরি করতে পারেন। Angular এবং Highcharts এর মাধ্যমে Highmaps লাইব্রেরি ইন্টিগ্রেট করার পর, আপনি পৃথিবী, দেশ, অথবা কাস্টম ম্যাপের উপর ভিত্তি করে ডেটা প্রদর্শন করতে পারবেন। ম্যাপের জুম, প্যান, এবং রঙ কাস্টমাইজেশনের মাধ্যমে আরও ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি করা সম্ভব। Highmaps ব্যবহার করে আপনার অ্যাপ্লিকেশনে ম্যাপভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন উপস্থাপন করা সহজ এবং কার্যকর।